{% extends "base.html" %}
{% load cctags %}
{% load ccfilters %}

{% block scripts %}
<link type="text/css" rel="stylesheet" href="/static/styles/riders.css"/>
<script type="text/javascript" src="/static/js/json2.js"></script>
<script type="text/javascript" src="{% url views.localjavascript 'jquery.magicmap2.js' %}"></script>
<script type="text/javascript" language="javascript" src="/static/js/vanadium-min.js"></script>
<script type="text/javascript">
var VanadiumConfig = {separator: '|'};
$(document).ready(function(){
    var my_photo = $("#my_photo");
    var photo_upload_callback = function(photourl){
        if (photourl){
            $("#userphotourl").val(photourl);
            $("#my_photo").attr("src",photourl);
        }
    };
    var left = my_photo.offset().left + my_photo.width() + 10;
    var top = my_photo.offset().top + 10;
    init_photo_upload( {left: left, top: top, img_type: 'Avatar',
                photo_upload_callback: photo_upload_callback});

    $("input").keypress(function (e) {
        var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if (keyCode == 13){
            return false;
        }else{
            return true;
        }
    });

    set_user_location = function(geocoderResult){
        var country,state,city;
        len = geocoderResult.address_components.length;
        for(var i=len-1; i>=0; i--){
            address = geocoderResult.address_components[i];
            switch(address.types[0]){
                case "country":
                    country = address.long_name;
                    break;
                case "administrative_area_level_1":
                    state = address.long_name;
                    break;
                case "administrative_area_level_2":
                case "locality":
                    city = address.long_name;
                    break;
                case "sublocality":
                    if(address.long_name.search(/市|县/)!=-1){
                        city = address.long_name;
                    }
                    break;
            }
        }
        $("#country").val(country);
        $("#state").val(state);
        $("#city").val(city);
        $("#user_lat").val(geocoderResult.geometry.location.lat());
        $("#user_lon").val(geocoderResult.geometry.location.lng());
    };
    option = { mapTypeId: google.maps.MapTypeId.RODEMAP,
               locationOption: { enable:true,
                                 location_callback: set_user_location
               }
    };
    {% if edituser.location %}
        startcenter = new google.maps.LatLng({{ edituser.location.lat }},
                {{ edituser.location.lon }});
        option["zoom"] = 10;
    {% else %}
        startcenter = $.magicmap.get_location_by_lang();
        option["zoom"] = 4;
    {%  endif %}

    var mmap = new $.magicmap(option);
    uicontrols = { map_container: $("#routes_map_container"),
                   searchbox: $("#routes_search_query"),
                   searchbtn: $("#routes_search_btn"),
                   waiting: $("#routes_search_waiting"),
                   searchresults: $("#routes_search_results"),
                   searchmsg: $("#routes_search_msg")
    };
    mmap.initmap({startcenter: startcenter},
                  uicontrols);

    $(".unbind").each(function(){
        $(this).click(function(){
            var outuser_uid = $(this).attr("title");
            var unbind_a = $(this);
            $.post("{% url apis.apisviews.rest %}",
                        {method:"unbind_outsite",
                         uid: "{{ user.uid }}",
                         outuser_uid: outuser_uid
                        },
                        function(data){
                            data = JSON.parse(data);
                            if (data.status=="ok") {
                                unbind_a.parent().parent().html("");
                            } else {
                                alert(data.message);
                            }
            });
        });
    });
});
</script>    
{% endblock %}

{% block menu %}
{% include '_menu_riders.html' %}
{% endblock %}

{% block main-page %}
{% if edituser %}
{% include '_photo_upload_form.html' %}
    
<form method="post" id="edit_form">
<div id="edit_profile_left">
    <h1 class="group_title">
        {% _ "Edit Your Profile" %}
    </h1>
    <table class="profile_table">
        <tr>
		    <th scope="row">{% _ "Photo" %}:</th>
		    <td>
                {% if edituser.photourl %}
                    <img id="my_photo" alt="My Photo" src="{{ edituser.photourl }}"/>
                    <input type="hidden" id="userphotourl" name="userphotourl" value="{{ edituser.photourl }}"/>
                {% else %}
                    <img id="my_photo" alt="My Photo" src="/static/images/rider.jpg"/>
                    <input type="hidden" id="userphotourl" name="userphotourl" value="/static/images/rider.jpg"/>
                {% endif %}
            </td>
	    </tr>
	    <tr>
		    <th scope="row">{% _ "Login Account" %}:</th>
		    <td><input type="text" size="30" value="{{edituser.uid}}" disabled="true"/>
                <input id="uid" name="uid" type="hidden" value="{{edituser.uid}}"/>
            </td>
	    </tr>
        <tr>
		    <th scope="row">{% _ "Email" %}:</th>
		    <td>
                <input id="email" name="email" type="text" size="30"
                       class="" value="{{edituser.email}}"/>
            </td>
	    </tr>
	    <tr>
		    <th scope="row">{% _ "Nick Name" %}:</th>
		    <td><input id="nickname"  name="nickname" type="text" size="30" value="{{edituser.name|safe}}"
				       class=":required :format|/^[^<>]*$/i|adv_name :min_length|2 :max_length|25"/>
                <span id="adv_name" style="display:none">[< >] {% _ "are not allowed" %}</span>
            </td>
	    </tr>

	    <tr>
		    <th scope="row">{% _ "Intro" %}:</th>
		    <td><textarea id="intro" name="intro" wrap="soft" rows="5" cols="25"
					class=":required :format|/^[^<>;]*$/i|adv_intro :min_length|2 :max_length|35">{{edituser.intro|safe}}</textarea>
                <span id="adv_intro" style="display:none">[< > ;] {% _ "are not allowed" %}</span>
            </td>
	    </tr>
        <tr>
		    <th scope="row">{% _ "Language" %}:
		    </th>
		    <td>
			    <select id="user_language" name="user_language">
                    {% for lang in languages %}
                    <option {% ifeq edituser.language lang %} selected="selected" {% endifeq %}
                        value="{{lang}}"> {% _ lang %} </option>
                    {% endfor %}
                </select>
		    </td>
	    </tr>
        <tr>
		    <th scope="row">{% _ "Units" %}:
		    </th>
		    <td>
			    <select id="user_units" name="user_units">
                    {% for u in unit.units %}
                    <option {% ifeq u edituser.units %} selected="selected" {% endifeq %}
                        value="{{u}}"> {% _ u %} </option>
                    {% endfor %}
                </select>
		    </td>
	    </tr>
        {% for site in outsiteuser.SITES %}
        <tr>
		    <th {% if site not in user.OutUsers.keys %}class="disabled"{% endif %}>{% _ site %}:
		    </th>
		    <td>
                {% if site not in user.OutUsers.keys %}
                    <a class="bind_site" title="{{ site }}" href="{% url views.connectoutsite site %}">
                            <img src="/static/images/bind_{{ site }}.png" alt="Bind {{ site }}"/>
                    </a>
                {% else %}
                    {% for key,val in user.OutUsers.items  %}
                        {% ifequal key site %}
                            <p>{{ val.name }}</p>
                            {% if site_settings.enable_post_activity and val.is_tweetable %}
                                <p><input type="checkbox" name="update_activity_{{ site }}" value="1"
                                      {% if val.enable_twitter %}checked{% endif %}/>
                                {% _ "Update Activity to" %} {% _ site %}?</p>
                            {% endif %}
                            <p><a href="javascript:;" class="yellowbutton size140 unbind" title="{{ val.uid }}">{% _ "Unbind" %}</a></p>
                        {% endifequal %}
                    {% endfor %}
                {% endif %}
            </td>
	    </tr>
        {% endfor %}
        <tr>
		    <th scope="row">&nbsp;
		    </th>
		    <td>
              <input type="submit" id="save" class="cmdbutton" value="{% _ 'Save Changes' %}" />
            </td>
	    </tr>
    </table>
</div>
<div id="edit_profile_right">
    <h1 class="group_title">
        {% _ "Set Your Location" %}
    </h1>
    <table class="profile_table">
        <tr>
            {% include '_base_routes_map.html' %}
        </tr>
        <tr>
		    <th scope="row">{% _ "Time Zone" %}:
		    </th>
		    <td>
			    <input id="timezone" name="timezone" type="text" size="10"
				       value="{{edituser.timezone}}" class=":required :float"/>
                <span class="tips">(<a target="_blank" 
            href="http://en.wikipedia.org/wiki/List_of_time_zones_by_country">{% _ "see list" %}</a>)
                </span>
		    </td>
		    <th scope="row">{% _ "City" %}:
		    </th>
		    <td>
			    <input id="city"  name="city" type="text" size="30" value="{{edituser.city|safe}}"
                        class=":max_length|30" />
		    </td>
	    </tr>
        <tr>
		    <th scope="row">{% _ "State" %}:
		    </th>
		    <td>
			    <input id="state"  name="state" type="text" size="25" value="{{edituser.state|safe}}"
                        class=":max_length|25" />
		    </td>
		    <th scope="row">{% _ "Country" %}:
		    </th>
		    <td>
			    <input id="country"  name="country" type="text" size="25" value="{{edituser.country|safe}}"
                        class=":max_length|25" />
                <input id="user_lat" name="user_lat" type="hidden" value="{{edituser.location.lat}}"/>
                <input id="user_lon" name="user_lon" type="hidden" value="{{edituser.location.lon}}"/>
		    </td>
	    </tr>
    </table>
</div>
</form>
{% endif %}
{% endblock %}
